<template>
  <div class="app-container">
    <div class="mainbox">
      <dt-table
        ref="dtTable"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
        @selection-change="selectionChange"
        @searchChange="handleQuery"
        @searchReset="handleReset"
      >
      </dt-table>
    </div>
  </div>
</template>

<script>
const STATE_LIST = [
  {
    label: '进行中',
    value: '1'
  },
  {
    label: '完成',
    value: '2'
  },
  {
    label: '失败',
    value: '3'
  }
]
export default {
  name: 'ReconciliationRecords',
  data() {
    return {
      loading: false,
      total: 0,
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        myDate: '',
        myState: ''
      }
    }
  },
  computed: {
    tableOpts() {
      return {
        rowKey: 'id',
        toolbarBtn: [],
        tableData: [{ myState: '2' }],
        firstTableCol: {
          select: true
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'myDate',
            label: '账务日期',
            show: true,
            search: true,
            type: 'date-range'
          },
          {
            prop: 'myState',
            label: '对账状态',
            show: true,
            // type: 'dict',
            search: true,
            searchType: 'select',
            searchData: () => STATE_LIST,
            formatter: (row) => {
              const stateObj = STATE_LIST.find((item) => item.value == row.myState)
              return stateObj.label
            }
          }
        ],
        operator: {
          width: 160,
          operatorBtn: [
            {
              text: '详情',
              // permission: ['REFUND_QUERY_DETAIL_BUTTON'],
              size: 'medium',
              click: (row, col, cellValue) => { return this.handleOperator(row) },
              type: 'text',
              textChange: (row) => {
                const { myState } = row
                let text = '-'
                switch (myState) {
                  case '2':
                    text = '详情'
                    break
                  case '3':
                    text = '对账'
                    break
                  default:
                    text = '-'
                    break
                }
                return text
              }
            }
          ]
        }
      }
    }
  },
  methods: {
    viewInfo(row) {},
    handleQuery(params) {
      const { myDate, myState } = params
      this.filterForm.myDate = myDate
      this.filterForm.myState = myState
      this.getList()
    },
    handleReset() {
      this.handleQuery({ myDate: '', myState: '' })
    },
    getList() {},
    selectionChange(arr) {},
    reconciliation(row) {},
    handleOperator(row) {
      const { myState, id } = row
      if (myState == '2') {
        this.$router.push({
          path: '/unifiedPayment/reconciliationDetail',
          query: {
            id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
